import React, { memo, useEffect, useRef } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { 
  getRadioCategoryAction,
  changeCurrentIdAction,
  changeCurrentPageAction
} from "../../store/actionCreators";

import { Carousel } from 'antd';
import { 
  CategoryWrapper, 
  CategoryContent, 
  CategoryItemImage 
} from "./style";

/**1.每页多少个类别；
 * 正常来说是每页20个，因为数据较少目前categories.length = 18；
 * 我们为了模拟多页，所以暂定每页渲染16个，计算出page = Math.ceil(18 / 16) = 2,那么就会渲染2页。
 * 
 * 通过Array(page).fill(0)创建一个[0, 0]的数组，通过数组slice去取每页的个数
 * 0, 1 分别是循环对用的下标值，调用getSize(index) 计算如下；
 * 第一次循环：cate.slice(0 * 16, (0 + 1) * 16) -> (0, 18)；
 * 第二次循环：cate.slice(1 * 16, (1 + 1) * 16) -> (16, 32);
 * 
 * 假入我们数据足够多试一下逻辑是否跑的通：categories.length = 42；PAGE_SIZE = 20;
 * 那么按每页20个就会渲染 page = Math.ceil(42 / 20) = 3；3页
 * Array(page).fill(0) [0, 0, 0];
 * 第一次循环：cate.slice(0 * 20, (0 + 1) * 20) -> (0, 42);
 * 第二次循环：cate.slice(1 * 20, (1 + 1) * 20) -> (20, 42);
 * 第三次循环：cate.slice(2 * 20, (2 + 1) * 20) -> (40, 60);
 * 
 * 显然是第一次循环, 通过geiSize就把数据取完了，所以我们正常的逻辑并不用通过getSize这个
 * 函数，应该是：cate.slice(index * page_size, (index + 1) * page_size)；
 */
const PAGE_SIZE = 16;

const RadioCategory = memo(() => {
  const carouselRef = useRef();
  const dispatch = useDispatch();
  const { categories, currentId } = useSelector(state => ({
    categories: state.getIn(["djradio", "categories"]),
    currentId: state.getIn(["djradio", "currentId"])
  }), shallowEqual);
  /**2. 计算渲染多少页用来轮播切换， 0条数据就1*/
  const page = Math.ceil(categories.length / PAGE_SIZE) || 1;

  useEffect(() => {
    dispatch(getRadioCategoryAction());
  }, [dispatch]);

  //3. 下标+1*page_size如果大于cate.length就是计算结果，否则就是cate.length
  // 备注：getSize是为了我们数据少，模拟翻页而写的函数，会导致第一页就把要展示的数据取完，接着创造一个数据重复的第二页；
  function getSize(index) {
    return index * PAGE_SIZE > categories.length ? index * PAGE_SIZE : categories.length;
  };

  function addClassName(id) {
    let clN = "category-item";
    return currentId === id ? clN + " active" : "category-item";
  };

  function handleItemClick(id) {
    dispatch(changeCurrentIdAction(id))
    dispatch(changeCurrentPageAction(1));
  };

  return (
    <CategoryWrapper>
      <div className="arrow arrow-left" onClick={e => carouselRef.current.prev()}></div>

      <CategoryContent>
        <Carousel dots={{className: "dots"}} ref={carouselRef}>
          {
            Array(page).fill(0).map((_, index) => {
              return (
                <div key={index} className="category-page">
                  {
                    categories.slice(index * PAGE_SIZE, getSize(index + 1)).map(item => {
                      return (
                        <div 
                          key={item.id}
                          className={addClassName(item.id)}
                          onClick={e => handleItemClick(item.id)}
                        >
                          <CategoryItemImage 
                            className="image"
                            imgUrl={item.picWebUrl}
                          />
                          <span>{item.name}</span>
                        </div>
                      )
                    })
                  }
                </div>
              )
            })
          }
        </Carousel>
      </CategoryContent>

      <div className="arrow arrow-right" onClick={e => carouselRef.current.next()}></div>
    </CategoryWrapper>
  )
});

export default RadioCategory